import styles from './index.module.scss';
import AliIcon from '@components/aliIcon';
import { articleType } from '@config/articles.config';

type PropType = {
    article: articleType
}

const Article = ({ article }: PropType) => {
    return <div className={styles.article_wrap}>
        <div className={styles.article_main}>
            <div className={styles.tag_icon}>
                <AliIcon icon='icon-html5' />
            </div>
            <div className={styles.detail}>
                <p className={styles.title}>{article.title}</p>
                <p className={styles.article_indient}>{article.intro}</p>
            </div>
        </div>
        <div className={styles.footer}>
            <div className={styles.publish_date_wrap}>
                <div className={styles.publish_date_icon}>
                    <AliIcon icon='icon-fabushijian' />
                </div>
                <p className={styles.date}>{article.publishDate}</p>
            </div>
            <div className={styles.up_wrap}>
                <div className={styles.up_icon}>
                    <AliIcon icon='icon-dianzan' />
                </div>
                <p className={styles.up_count}>{article.upCounts}</p>
            </div>
            <div className={styles.comment_wrap}>
                <div className={styles.comment_icon}>
                    <AliIcon icon='icon-pinglun' />
                </div>
                <p className={styles.comment_count}>{article.commentCounts}</p>
            </div>
        </div>
    </div>
}

export default Article;